<template>
    <div>
        <Headers/>
        <div class="layout">
            <div class="left-View">
                <Model1/>
                <Model2/>
                <Model3/>
            </div>
            <div class="center-View">
                <Model7/>
                <Model8/>
            </div>
            <div class="right-View">
                <Model4/>
                <Model5/>
                <!--<Model6/>-->
            </div>
        </div>
    </div>
</template>
<script>
import Headers from '@/components/header'
import Model1 from '@/components/country/model1'
import Model2 from '@/components/country/model2'
import Model3 from '@/components/country/model3'
import Model4 from '@/components/country/model4'
import Model5 from '@/components/country/model5'
import Model7 from '@/components/country/model7'
import Model8 from '@/components/country/model8'

export default {
    components: {
        Headers,
        Model1,
        Model2,
        Model3,
        Model4,
        Model5,
        Model7,
        Model8,
    }
}
</script>
<style scoped lang="scss">
.layout {
    display: flex;
    margin: 1vw 0 0 0;
    padding: 0 .6vw;

    .left-View, .center-View, .right-View {
        flex: 1;
    }

    .center-View {
        flex: 1.2;
        padding: 0 screenVw(1.2);
    }
}
</style>
